<template>
    <div>
        <div style="margin-top: 40px">
            <Form :model="formItem" :label-width="150" style="width: 480px; margin: 0 auto" show-message>
                <FormItem label="存款：" required>
                    <Input v-model="formItem.Deposit" placeholder="请输入已有存款..." type="number"/>
                </FormItem>
                <FormItem label="收入：" required>
                    <Input v-model="formItem.Income" placeholder="请输入每年收入..." type="number"/>
                </FormItem>
                <FormItem label="是否有孩子：" required>
                    <Select v-model="formItem.have_children" placeholder="请选择....">
                        <Option v-for="item in have_children" :value="item.value" :key="item.label">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="工作类型：" required>
                    <Select v-model="formItem.job" placeholder="请选择....">
                        <Option v-for="item in jobs" :value="item.value" :key="item.label">{{ item.label }}</Option>
                    </Select>
                </FormItem>

                <FormItem label="是否为家庭支柱：" required>
                    <Select v-model="formItem.Support" placeholder="请选择...">
                        <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="是否患有重大疾病：" required>
                    <Select v-model="formItem.Specific" placeholder="请选择...">
                        <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem>

                <FormItem>
                    <Button type="primary" @click="policyConsult">查询</Button>
                    <Button style="margin-left: 8px" @click="clear">清空</Button>
                </FormItem>
            </Form>
        </div>
        <div></div>
    </div>
</template>

<script>
  export default {
    name: "Products",
    data() {
      return {
        formItem: {
          Deposit: null,
          Income: null,
          have_children: '',
          job: '',
          Support: '',
          Specific: ''
        },
        options: [
          {
            value: 'Yes',
            label: '是'
          },
          {
            value: 'No',
            label: '否'
          }
        ],
        have_children: [
          {
            value: 'No Child',
            label: '没有孩子'
          },
          {
            value: 'Have Child',
            label: '有孩子'
          }
        ],
        jobs: [
          {
            value: 'No Job',
            label: '没有工作'
          },
          {
            value: 'Indoor Job',
            label: '室内工作'
          },
          {
            value: 'Indoor and Outdoor Job',
            label: '室内与室外工作'
          },
          {
            value: 'Outdoor Job',
            label: '室外工作'
          }
        ]
      }
    },
    methods: {
      policyConsult() {
        this.$http.post('/insurance/recommed', this.$qs.stringify({
          'Deposit': parseInt(this.formItem.Deposit),
          'Income': parseInt(this.formItem.Income),
          'have_children': this.formItem.have_children,
          'job': this.formItem.job,
          'Support': this.formItem.Support,
          'Specific': this.formItem.Specific
        })).then(res => {
          if (res.status === 200) {
            if (res.data.code === 200) {
              this.$Message.success('查询到符合您条件的保险产品：' + res.data.recommendation)
            } else {
              this.$Message.error(res.data.msg)
            }
          } else {
            this.$Message.info('请求出错，' + res.status)
          }
        }).catch(err => {
          this.$message.error(err)
        })
      },
      clear() {

      }
    }
  }
</script>

<style scoped>

</style>